import { createPersistedStore } from '../services/store.service';

interface UIState {
  fontSize: 'small' | 'medium' | 'large';
  autoPlay: boolean;
  darkMode: boolean;
  
  // Actions
  setFontSize: (size: 'small' | 'medium' | 'large') => void;
  setAutoPlay: (enabled: boolean) => void;
  setDarkMode: (enabled: boolean) => void;
}

export const useUIStore = createPersistedStore<UIState>(
  {
    name: 'ui-store',
    initialState: {
      fontSize: 'medium',
      autoPlay: false,
      darkMode: false,
    },
    onRehydrate: (state) => {
      // Apply dark mode on rehydration
      if (state.darkMode) {
        document.body.classList.add('dark');
      }
    },
  },
  (set) => ({
    setFontSize: (size) => set({ fontSize: size }),
    
    setAutoPlay: (enabled) => set({ autoPlay: enabled }),
    
    setDarkMode: (enabled) => {
      if (enabled) {
        document.body.classList.add('dark');
      } else {
        document.body.classList.remove('dark');
      }
      set({ darkMode: enabled });
    },
  })
);